﻿//some sidebar variables
$sidebar-background: #F2F2F2;
$sidebar-border: #CCC;

$sidebar-toggle-background: #F3F3F3;
$sidebar-toggle-border: #E0E0E0;
$sidebar-toggle-icon-color: #AAA;
$sidebar-toggle-icon-border: #BBB;
$sidebar-toggle-icon-background: #FFF;

$nav-item-color: #585858;
$nav-item-background: #F8F8F8;
$nav-item-border: #E5E5E5;

$nav-item-color-focus: #1963AA;
$nav-item-color-hover: mix(#4B88B7 , $nav-item-color-focus , 25%);
$nav-item-background-hover: #FFF;

$nav-item-background-open: #FAFAFA;

$nav-item-color-active: #2B7DBC;//#0B6CBC;
$nav-item-background-active: #FFF;



$nav-item-icon-width: 30px;

$nav-item-hover-indicator: #629CC9;
$nav-item-arrow-color: #777;
$nav-item-arrow-color-active: #4B88B7;

$submenu-border: $nav-item-border;
$submenu-background: #FFF;
$submenu-item-background: #FFF;
$submenu-item-color: #616161;
$submenu-item-border: #E4E4E4;
$submenu-item-icon-size: 18px;

$submenu-item-color-hover: #4B88B7;
$submenu-item-background-hover: #F1F5F9;
$submenu-item-icon-active: #C86139;
$submenu-item-background-active: #F5F7FA;
$submenu-border-active: #83B6D1;


$third-level-item-background-hover: $submenu-item-background-hover;
$third-level-item-color-hover: $submenu-item-color-hover;

$submenu-tree-line-style: dotted;
$submenu-tree-line-color: mix(#BCCFE0 , #7EAACB);
$submenu-tree-line-color-active: mix(mix(#BCCFE0 , #7EAACB) , #7EAACB);

$screen-hover-menu: $grid-float-breakpoint;//minimum width for .hover submenus
$screen-compact-menu: $screen-hover-menu;

$icon:TESTTEST;

$shortcuts-background: #FAFAFA;
$shortcuts-border: #DDD;
.no-skin {
	.navbar .navbar-toggle {
		background-color: #75B3D7;
		&:focus {
			background-color: #75B3D7;
			border-color: transparent;
		}
		&:hover {
			background-color: darken(#75B3D7 , 5%);
			border-color: rgba(255,255,255,0.1);
		}
		
		&.display, &[data-toggle=collapse]:not(.collapsed) {
			background-color: darken(#75B3D7 , 10%);
			box-shadow: inset 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
			border-color: rgba(255, 255, 255, 0.35);
		}
	}

	.sidebar {
		background-color: $sidebar-background;
		border-style: solid;
		border-color: $sidebar-border;
		border-width: 0 1px 0 0;
	}

	.nav-list .open > a {
		& , &:hover, &:focus {
			background-color: $nav-item-background-open;
		}
	}


	.nav-list > li {
		border-color: $nav-item-border;
		> a {
			background-color: $nav-item-background;
			color: $nav-item-color;
			
			&:focus {
				background-color: $nav-item-background;
				color: $nav-item-color-focus;
			}
		}

		&:hover > a {
			background-color: $nav-item-background-hover;
			color: $nav-item-color-hover;
		}
		
		&.open > a {
			background-color: $nav-item-background-open;
			color: $nav-item-color-focus;
		}
		
		&.active > a {
			font-weight: bold;
			color: $nav-item-color-active;
			& , &:hover, &:focus {
				background-color: $nav-item-background-active;
			}
		}
	}


	//submenu
	.nav-list > li .submenu {
		background-color: $submenu-background;
		border-color: $submenu-border;

		> li > a {
			border-top-color: $submenu-item-border;
			background-color: $submenu-item-background;
			color: $submenu-item-color;
			
			&:hover {
				color: $submenu-item-color-hover;
				background-color: $submenu-item-background-hover;
			}
		}
		> li.active > a {
			color: $nav-item-color-active;
			> .menu-icon {
				color: $submenu-item-icon-active;
			}
		}
		> li.active.open > a > .menu-icon {
			color: inherit;
		}
		
		@media only screen and (min-width: $screen-hover-menu) {
			> li.active.hover > a.dropdown-toggle > .menu-icon {
				color: inherit;
			}
		}


		> li.active:not(.open) > a {
			background-color: $submenu-item-background-active;
			&:hover {
				background-color: $submenu-item-background-hover;
			}
		}
	}

	.nav-list > li > .submenu {
		.open > a, .open > a:hover, .open > a:focus {
			border-color: $submenu-item-border;
		}
		
		li > .submenu > li a{
			color: lighten($submenu-item-color , 8%);
			&:hover {
				color: $third-level-item-color-hover;
				background-color: $third-level-item-background-hover;
			}
		}
		
		li.open > a {
			color: $third-level-item-color-hover;
		}
		li > .submenu li.open > a , li > .submenu li.active > a {
			color: $third-level-item-color-hover;
		}
	}
	
	//the tree line
	.nav-list > li {
		> .submenu:before,
		> .submenu > li:before {
			border-color: $submenu-tree-line-color;
		}
		&.active > .submenu:before,
		&.active > .submenu > li:before	{
			border-color: $submenu-tree-line-color-active;
		}
	}



	//extra
	.sidebar-toggle {
		background-color: $sidebar-toggle-background;
		border-color: $sidebar-toggle-border;

		> .#{$icon} {
			border-color: $sidebar-toggle-icon-border;
			color: $sidebar-toggle-icon-color;
			background-color: $sidebar-toggle-icon-background;
		}
	}
	.sidebar-shortcuts {
		background-color: $shortcuts-background;
	}
	.sidebar-fixed .sidebar-shortcuts {
		border-color: $shortcuts-border;
	}
	.sidebar-shortcuts-mini {
		background-color: $submenu-background;
	}



	//-li > .arrow
	.nav-list li > .arrow {
		&:before {
			border-right-color: #B8B8B8;
			-moz-border-right-colors: #B8B8B8;
			
			border-width: 10px 10px 10px 0;
			//because border-width: 10px in firefox doesn't look good
			//but on other skins, it has a bad edge on firefox
			left: -11px;
		}
		&:after {
			border-right-color: $submenu-background;
			-moz-border-right-colors: $submenu-background;
			
			border-width: 10px 10px 10px 0;
			left: -10px;
		}
	}
	.nav-list > li.pull_up > .arrow {
		&:after {
			border-right-color: $submenu-background !important;
			-moz-border-right-colors: $submenu-background !important;
			
			border-width: 10px 10px 10px 0 !important;//to override .menu-min
			left: -10px !important;
		}
		&:before {
			border-width: 10px 10px 10px 0 !important;
			left: -11px !important;
		}
	}



	//active state
	.nav-list li.active > a:after {
		border-right-color: $nav-item-color-active;
		-moz-border-right-colors: $nav-item-color-active;
	}
	//the border on right of active item
	.nav-list > li.active:after {
		display: block;
		content: "";
		position: absolute;
		right: -2px;
		top: -1px;
		bottom: 0;
		z-index: 1;

		border: 2px solid;
		border-width: 0 2px 0 0;
		border-color: $nav-item-color-active
	}
	.sidebar-scroll .nav-list > li.active:after {
		//so that its inside sidebar
		right: 0;
	}

	
	@media only screen and (max-width: $grid-float-breakpoint-max) {
		.sidebar.responsive .nav-list > li.active.open > a:after {
			display: block;
		}
	}




	 //menu min
	
	
}//.no-skin


//hover highlight
